<template>
  <!-- 首页 -->
  <div class="tc" v-if="page=='home'">
    <h1>打水杯游戏</h1>
    <button @click="startGame">开始游戏</button>
  </div>
  <!-- 游戏页面 -->
   <div class="tc" v-if="page=='game'">
    <p class="tr">{{ parseInt(count/60) }}:{{ count%60 }}</p>
    <p>
      <img @click="onHit" src="./imgs/cup1.jpg" alt="">
    </p>
    <div class="progress">
      <div :style="{width:blood+'px'}"></div>
    </div>
    <button @click="goHome">回到首页</button>
   </div>
   <!-- 游戏结束 -->
   <div class="tc" v-if="page=='over'">
    <p>
      <img src="./imgs/cup2.jpg" alt="">
    </p>
    <p>用时:{{ parseInt(count/60) }}分{{ count%60 }}秒</p>
    <button @click="startGame">重新开始</button>
   </div>
</template>

<script setup>
import { ref } from 'vue';
//页面
const page = ref('home');
//定时器
let timer;
// 计时数字
let count=ref(0);
//水杯血量
let blood = ref(100);

//游戏开始
const startGame = ()=>{
  //跳转页面
  page.value = 'game';
  //重置数据
  blood.value = 100;
  count.value = 0;
  // 启动计时器
  timer = setInterval(()=>{
    count.value++;
  },50)
}

// 打击水杯
const onHit = ()=>{
  blood.value -= 10;
  if(blood.value<=0){
    //游戏结束
    //清除计时器
    clearInterval(timer);
    //跳转页面
    page.value = 'over';
  }
}

const goHome = ()=>{
  //清除计时器
  clearInterval(timer);
    //跳转页面
    page.value = 'home';
}

</script>

<style scoped>
.tr{text-align: right;}
.tc{text-align: center;}
button{background-color: blue;color: #fff;}
.progress{padding: 3px;background-color: black;width: 100px;margin: 10px auto;}
.progress div{background-color: red;height: 10px;}
</style>